<template>
  <div class="box">
    <div class="bgc">
      <!-- 搜索 -->
      <searchlist>
        <template #left>
          <span @click="back"><img src="../../../static/images/tabbar/back.png" alt=""/></span>
        </template>
        <template #center>
          <input type="text" id="searchInput" ref="input" />
          <img
            src="../../../static/images/tabbar/search.png"
            class="search_icon"
          />
        </template>
      </searchlist>
    </div>
    <div>
      <mt-navbar v-model="selected">
        <mt-tab-item id="1">代付款</mt-tab-item>
        <mt-tab-item id="2">待发货</mt-tab-item>
        <mt-tab-item id="3">待收货</mt-tab-item>
      </mt-navbar>
      <mt-tab-container v-model="selected">
        <mt-tab-container-item id="1">
          <tobepaid></tobepaid>
        </mt-tab-container-item>
        <mt-tab-container-item id="2">
          <tobedelivered></tobedelivered>
        </mt-tab-container-item>
        <mt-tab-container-item id="3">
          <tobereceived></tobereceived>
        </mt-tab-container-item>
      </mt-tab-container>
    </div>
  </div>
</template>
<script>
import tobepaid from "./Tobepaid/tobepaid";
import tobedelivered from "./Tobedelivered/tobedelivered";
import tobereceived from "./Tobereceived/tobereceived";
import searchlist from "../../components/header/header";
export default {
  components: {
    tobepaid,
    tobedelivered,
    tobereceived,
    searchlist,
  },
  data() {
    return {
     selected:"1"
    }
  },
  methods: {
    //返回上一级
    back(){
      this.$router.push('/profile');
    },
  },
 
};
</script>

<style lang="less" scoped>
.box{
  width: 100vw;
  height: 100vh;
  background-color: #f2f2f2;
}
.bgc{
  background-color: #fff;
}
.mint-navbar{
  background-color:#f2f3f2;
}
.headerslot{
  background-color: #fff;
}
.title {
  img {
    width: 42px;
    height: 46px;
  }
}
#searchbtn {
  width: 92px;
  height: 46px;
  background: #ff6666;
  border-radius: 23px;
  font-size: 20px;
  color: #fefefe;
  margin-top: 5px;
}
#searchInput {
  border: 2px solid #dcdcdc;
  height: 54px;
}
.search_icon {
  top: 10px;
}
.headerslot {
  margin-top: 55px;
}
</style>